<template>
  <el-row :class="ClassFilter(type)" align="middle">
    <el-col :span="21" :push="2" style="color: #ff2f2f">
      <el-icon :size="20" style="vertical-align: middle">
        <Bell style="font-size: 20px; font-weight: 600" />
      </el-icon>
      {{ title }}
    </el-col>
    <el-col :span="3" :offset="0" align="middle">
      <el-button v-if="btnTitle" type="danger" size="default" @click="BtnFun">{{ btnTitle }}</el-button>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps({
  type: { type: String, default: "error" },
  title: { type: String, default: "" },
  btnTitle: { type: String, default: undefined },
});
const emit = defineEmits(["callback"]);
const type = ref(props.type);
const title = ref(props.title);
const btnTitle = ref(props.btnTitle);

function BtnFun() {
  emit("callback");
}

function ClassFilter(type: String) {
  if (type == "warning") {
    return "bg-warning";
  }
  if (type == "danger") {
    return "bg-danger";
  }
  if (type == "info") {
    return "bg-info";
  }
  if (type == "success") {
    return "bg-success";
  }
}
</script>

<style lang="scss" scoped>
.bg-success {
  background-color: #67c23a;
}

.bg-info {
  background-color: #909399;
}

.bg-warning {
  background-color: #e6a23c;
}

.bg-danger {
  height: 46px;
  line-height: 20px;
  border-radius: 5px;
  background-color: rgba(255, 47, 47, 0.13);
  color: rgba(255, 47, 47, 1);
  font-size: 14px;
  text-align: left;
  font-family: Roboto;
}

.notify-box {
  padding-bottom: 15px;
}
</style>
